<template>
    <div class="home">
      <div class="container">
        <h1>日志管理系统</h1>
        
        <!-- 添加新日志表单 -->
        <div class="form-section">
          <h2>添加新日志</h2>
          <form @submit.prevent="handleSubmit" class="form">
            <div class="form-group">
              <label for="uuid">UUID:</label>
              <input
                id="uuid"
                v-model="formData.uuid"
                type="text"
                class="form-control"
                placeholder="请输入 UUID"
                required
              />
            </div>
            <div class="form-group">
              <label for="name">名称:</label>
              <input
                id="name"
                v-model="formData.name"
                type="text"
                class="form-control"
                placeholder="请输入名称"
                required
              />
            </div>
            <button type="submit" class="btn btn-primary">添加日志</button>
          </form>
        </div>
  
        <!-- 日志列表 -->
        <div class="logs-section">
          <h2>日志列表</h2>
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="error" class="error">{{ error }}</div>
          <div v-else-if="logs.length === 0" class="empty">暂无日志数据</div>
          <div v-else class="logs-table">
            <table>
              <thead>
                <tr>
                  <th>编号</th>
                  <th>UUID</th>
                  <th>名称</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="log in logs" :key="log.no">
                  <td>{{ log.no }}</td>
                  <td>{{ log.uuid }}</td>
                  <td>
                    <span v-if="!log.editing">{{ log.name }}</span>
                    <input
                      v-else
                      v-model="log.editName"
                      type="text"
                      class="form-control"
                      @blur="saveEdit(log)"
                      @keyup.enter="saveEdit(log)"
                    />
                  </td>
                  <td>
                    <button
                      v-if="!log.editing"
                      @click="startEdit(log)"
                      class="btn btn-small btn-secondary"
                    >
                      编辑
                    </button>
                    <button
                      @click="handleDelete(log.no)"
                      class="btn btn-small btn-danger"
                    >
                      删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getAllLogs, createLog, updateLog, deleteLog, type Log } from '@/api/logApi'
  
  // 扩展 Log 类型，添加编辑相关属性
  interface ExtendedLog extends Log {
    editing: boolean
    editName: string
  }

  const logs = ref<ExtendedLog[]>([])
  const loading = ref(false)
  const error = ref('')
  const formData = ref({
    uuid: '',
    name: ''
  })
  
  // 加载日志列表
  const loadLogs = async () => {
    loading.value = true
    error.value = ''
    
    try {
      const response = await getAllLogs()
      if (response.success && response.data) {
        logs.value = response.data.map(log => ({
          ...log,
          editing: false,
          editName: log.name
        }))
      } else {
        error.value = response.message || '加载失败'
      }
    } catch (err) {
      error.value = '加载失败'
    } finally {
      loading.value = false
    }
  }
  
  // 提交表单
  const handleSubmit = async () => {
    try {
      const response = await createLog({
        uuid: formData.value.uuid,
        name: formData.value.name
      })
      
      if (response.success) {
        formData.value.uuid = ''
        formData.value.name = ''
        await loadLogs()
        alert('添加成功！')
      } else {
        alert(response.message || '添加失败')
      }
    } catch (err) {
      alert('添加失败')
    }
  }
  
  // 开始编辑
  const startEdit = (log: ExtendedLog) => {
    log.editing = true
    log.editName = log.name
  }
  
  // 保存编辑
  const saveEdit = async (log: ExtendedLog) => {
    try {
      const response = await updateLog(log.no, {
        uuid: log.uuid,
        name: log.editName
      })
      
      if (response.success) {
        log.name = log.editName
        log.editing = false
        alert('更新成功！')
      } else {
        alert(response.message || '更新失败')
      }
    } catch (err) {
      alert('更新失败')
    }
  }
  
  // 删除日志
  const handleDelete = async (no: number) => {
    if (!confirm('确定要删除这条日志吗？')) {
      return
    }
    
    try {
      const response = await deleteLog(no)
      
      if (response.success) {
        await loadLogs()
        alert('删除成功！')
      } else {
        alert(response.message || '删除失败')
      }
    } catch (err) {
      alert('删除失败')
    }
  }
  
  // 组件挂载时加载数据
  onMounted(() => {
    loadLogs()
  })
  </script>
  
  <style scoped>
  .home {
    padding: 20px;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
  }
  
  h2 {
    color: #34495e;
    margin-bottom: 20px;
  }
  
  .form-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }
  
  .form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 15px;
    align-items: end;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
  }
  
  .form-control {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }
  
  .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
  }
  
  .btn-primary {
    background-color: #007bff;
    color: white;
  }
  
  .btn-primary:hover {
    background-color: #0056b3;
  }
  
  .btn-secondary {
    background-color: #6c757d;
    color: white;
    margin-right: 5px;
  }
  
  .btn-secondary:hover {
    background-color: #545b62;
  }
  
  .btn-danger {
    background-color: #dc3545;
    color: white;
  }
  
  .btn-danger:hover {
    background-color: #c82333;
  }
  
  .btn-small {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .logs-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .loading, .error, .empty {
    padding: 20px;
    text-align: center;
    color: #6c757d;
  }
  
  .error {
    color: #dc3545;
  }
  
  .logs-table {
    overflow-x: auto;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
  }
  
  th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
  }
  
  tr:hover {
    background-color: #f8f9fa;
  }
  
  @media (max-width: 768px) {
    .form {
      grid-template-columns: 1fr;
    }
    
    .logs-table {
      font-size: 14px;
    }
    
    th, td {
      padding: 8px;
    }
  }
  </style>